<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import APIWallet from '@/api/wallet'
import { Decimal } from 'decimal.js'
import { ElLoading, ElMessage } from 'element-plus';
import IssueAnInvoice from './components/IssueAnInvoice/index.vue'

const list = ref<any>([])

const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const total = shallowRef<number>(0)
const money = shallowRef<number>(0)

function getAllRechargelist() {
    loading.value = true
    APIWallet.getAllRechargelist(queryParams.value).then(({ data, total: count }) => {
        list.value = data.list
        total.value = count
        money.value = data.total_amount
    }).finally(() => {
        loading.value = false
    })
} getAllRechargelist()

const order_code = shallowRef<string>('')

const sumMoney = shallowRef<number>(0)

function handleSelectionChange(order: any) {
    order_code.value = order.map((item: any) => item.order_code).join(',')
    let num = 0
    order.forEach((item: any) => {
        num = new Decimal(num).add(new Decimal(Number(item.amount))).toNumber()
    })
    sumMoney.value = num
}

const dialogVisible = shallowRef<boolean>(false)

function handleShow() {
    if (!order_code.value) return ElMessage.error('至少选择一条订单开票')
    dialogVisible.value = true
}

</script>

<template>
    <div class="billing">
        <Content class="billing-content">
            <div class="billing-title">
                <ContentTitle title="充值订单开票" />
                <div class="billing-number">共<span>{{ list.length }}</span>个订单可申请发票总金额：<span>￥{{ money }}</span></div>
            </div>
            <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="center" prop="order_code" label="订单编号" />
                <el-table-column align="center" prop="amount" label="金额" />
                <el-table-column align="center" prop="pay_type_name" label="充值方式" />
                <el-table-column align="center" prop="create_time" label="充值时间" />
                <el-table-column align="center" prop="status_name" label="当前状态" />
            </el-table>
            <div class="bottom-btn">
                <div class="number">
                    <p>已选开票金额</p>
                    <p>￥ {{ sumMoney }}</p>
                </div>
                <button type="button" class="next-btn" @click="handleShow">下一步</button>
            </div>
        </Content>
        <IssueAnInvoice v-model="dialogVisible" :amount="sumMoney" :order_code="order_code"
            @get-list="getAllRechargelist" />
    </div>
</template>


<style lang="scss">
.billing {
    .list {
        .el-table__row {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .cell {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }
}
</style>

<style lang="scss" scoped>
.billing {
    .bottom-btn {
        display: flex;
        justify-content: flex-end;
        gap: 0 22px;
        margin-top: 280px;

        .number {
            p {
                &:nth-child(1) {
                    color: rgba(16, 16, 16, 1);
                    font-size: 14px;
                }

                &:nth-child(2) {
                    color: rgba(249, 20, 20, 1);
                    font-size: 14px;
                }
            }
        }

        .next-btn {
            width: 151px;
            height: 40px;
            border-radius: 5px;
            background-color: rgba(249, 20, 20, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            border: none;
            cursor: pointer;
        }
    }

    .billing-content {
        .billing-title {
            display: flex;
            align-items: center;
            gap: 0 22px;

            .billing-number {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                line-height: 1em;

                span {
                    color: #F91414;
                }
            }
        }
    }

    .list {
        margin-top: 15px;
    }
}
</style>
